<template>
  <div class="detail-navbar">
    <nav-bar>
      <div slot="left" @click="backHanlder">
        <img src="~assets/images/common/back.svg" alt="" />
      </div>
      <div slot="center">
        <ul class="review">
          <li
            v-for="(t, idx) in navbarText"
            :key="t"
            @click="itemClickHandler(idx)"
            :class="{ active: currentIndex === idx }"
          >
            {{ t }}
          </li>
        </ul>
      </div>
    </nav-bar>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar/NavBar.vue'
export default {
  props: {},
  data () {
    return {
      navbarText: ['商品', '参数', '评论', '推荐'],
      currentIndex: 0
    }
  },
  created () {},
  methods: {
    // 返回上个页面
    backHanlder () {
      this.$router.back()
      // 点击之后显示tabbar, 这里就不要改成block, 否则会改变样式
      // document.getElementById('tabBar').style.display = ''
    },

    // 选项卡点击切换
    itemClickHandler (idx) {
      this.currentIndex = idx
      this.$emit('itemNavImgClick', idx)
    }
  },
  components: {
    NavBar
  }
}
</script>

<style lang="less" scoped>
.detail-navbar {
  font-size: 14px;

  img {
    width: 30px;
    margin-top: 9px;
  }

  .review {
    display: flex;

    li {
      flex: 1;
    }
  }

  .active {
    color: var(--color-high-text);
  }
}
</style>
